<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="color in colors">{{color}}</li>
			</ul>
			
			<table>
				<tr><td>ID</td><td>姓名</td><td>年龄</td></tr>
				<tr v-for="stu in stus">
					<td>{{stu.id}}</td>
					<td>{{stu.name}}</td>
					<td>{{stu.age}}</td>
				</tr>
			</table>
			
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						message:"Hello World!",
						colors: ["红", "橙", "黄", "绿"],
						stus:[
							{
								id: 001,
								name: "张三",
								age: 18
							},
							{
								id: 002,
								name: "李四",
								age: 19
							},
							{
								id: 003,
								name: "王五",
								age: 20
							}
						]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
